<template>
  <page-header-wrapper :title="false">
    <a-card title="待开处理发票">
      <div class="table-page-search-wrapper">
        <a-form-model :model="queryParam" layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-model-item label="合同编号">
                <a-input type="text" v-model="queryParam['filter[contract_no]']" placeholder="请输入合同编号" />
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-model-item label="提交顾问">
                <a-select
                  show-search
                  v-model="queryParam['filter[adviser_uid]']"
                  placeholder="选择顾问姓名"
                  :filter-option="filterOption"
                >
                  <a-select-option v-for="(item,index) in adviserOpts" :key="index" :value="index">{{item}}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="申请时间">
                <a-range-picker @change="onCreateAt" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
                <span class='table-page-search-submitButtons'>
                  <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                  <a-button style="margin-left: 8px" @click="reset">重置</a-button>
                </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div class="table-operator">
        <s-table
          bordered
          ref="table"
          :row-key="(record) => record.id"
          :columns="invoiceColumns"
          :data="invoiceData"
        >
          <template slot="contract_no" slot-scope="text,record">
            <a-button v-if="text == '合并合同'" type="link" @click="toDetail(record.id)">{{text}}</a-button>
            <a-button v-else type="link" @click="$router.push({ name: 'ContractDetail', params: { id: record.contract_id } })">{{text}}</a-button>
          </template>
          <template slot="company_name" slot-scope="text,record">
            {{text}}({{record.tax_point}}%)
          </template>
          <template slot="username" slot-scope="text, record">
            <a-tag>{{text}}</a-tag><br>
            <a-tag>{{record.group_type}}组</a-tag><br>
            <a-tag>{{record.leader_name}}</a-tag>
          </template>
          <template slot="is_check" slot-scope="text">
            <div v-if="text == 1">再次审核</div>
            <div v-else>初次审核</div>
          </template>
          <template slot="file_url" slot-scope="text,record">
            <a-button
              v-if="record.file_url != ''"
              :title="record.filename"
              size="small"
              type="link"
              icon="download"
              @click="download(record.file_url)"
            >
              点击下载
            </a-button>
          </template>
          <template slot="action" slot-scope="text,record">
            <a-button size="small" type="primary" @click="checkInvoice(record.id)">审核</a-button>
            <a-button size="small" type="primary" @click="toDetail(record.id)">详情</a-button>
          </template>
        </s-table>
      </div>
    </a-card>
    <a-modal
      title="审核发票"
      v-model="visible"
      @ok="onSubmit"
      @cancel="onCancel"
    >
      <a-form-model>
        <a-form-model-item>
          <a-radio-group v-model="invoiceForm.status">
            <a-radio v-for="(item,index) in statusOpts" :key="index" :value="index">{{item}}</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item v-if="invoiceForm.status == 50" label="拒绝理由">
          <a-textarea :rows="4" v-model="invoiceForm.notes"></a-textarea>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import invoiceColumns from '@/columns/invoice'
import { getCheck, getUnInvoice, postCheck } from '@/api/invoice'

export default {
  components: {
    STable
  },
  name: 'CheckInvoiceList',
  data () {
    return {
      invoiceColumns: invoiceColumns.invoice,
      invoiceData: parameters => {
        return getUnInvoice(Object.assign(parameters, this.queryParam)).then(res => {
          this.adviserOpts = res.result.all_advisers
          return res.result
        })
      },
      visible: false,
      refuseVisible: false,
      refuseReason: '',
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
      queryParam: {},
      advanced: true,
      headerOpts: {},
      typeOpts: {},
      adviserOpts: {},
      invoiceForm: {
        status: ''
      },
      statusOpts: {}
    }
  },
  created () {
    this.queryParam['filter[status]'] = '20'
  },
  methods: {
    toDetail (id) {
      this.$router.push({ name: 'InvoiceDetail', params: { id } })
    },
    checkInvoice (id) {
      getCheck(id).then(res => {
        this.invoiceForm['invoice_id'] = id
        this.statusOpts = res.result.status2_items
        this.visible = true
      })
    },
    download (url) {
      window.open(url)
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    reset () {
      // this.queryParam = {}
      this.queryParam['filter[adviser_uid]'] = ''
      this.queryParam['filter[created_at_start]'] = ''
      this.queryParam['filter[created_at_end]'] = ''
      this.$refs.table.refresh(true)
    },
    onSubmit () {
      const data = {}
      for (const k in this.invoiceForm) {
        data['invoice[' + k + ']'] = this.invoiceForm[k]
      }
      data['invoice_id'] = this.invoiceForm.invoice_id
      postCheck(data).then(res => {
        if (res.status === 0) {
          this.visible = false
          this.$refs.table.refresh(true)
        } else {
          this.$warning({
            title: res.msg
          })
        }
      })
    },
    onCancel () {
    },
    onCreateAt (date, dateString) {
      this.queryParam['filter[created_at_start]'] = dateString[0]
      this.queryParam['filter[created_at_end]'] = dateString[1]
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    }
  }
}
</script>

<style scoped>

</style>
